<template>
	<view class="gt-select-region">
		<view class="row" @click="$refs.popup.open()">
			<view class="col-auto mr-10">
				<view class="" :class="inputClass" :style="inputStyle" v-if="regionName">{{regionName}}</view>
				<view class="c-bbb" :class="inputClass" :style="inputStyle" v-else>{{placeholder}}</view>
			</view>
			
			<uni-icons :type="iconType" class="arrowdown" color="#bbbbbb" ></uni-icons>
		</view>
		
		
		
		<uni-popup ref="popup" type="bottom">
			<view style="padding:15px">
				<view style="background-color: #ffffff;padding: 15px;border-radius: 25px;">
					<view class="row" style="line-height: 30px;padding: 0 15px;">
						<view @click="cancel">取消</view>
						<view class="col-auto"></view>
						<view @click="comfirm">确认</view>
					</view>
					<picker-view v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange"
						class="picker-view">
						<picker-view-column>
							<view class="item" v-for="(item,index) in provinceList" :key="index">{{item.name}}</view>
						</picker-view-column>
						<picker-view-column>
							<view class="item" v-for="(item,index) in cityList" :key="index">{{item.name}}</view>
						</picker-view-column>
						<picker-view-column>
							<view class="item" v-for="(item,index) in countyList" :key="index">{{item.name}}</view>
						</picker-view-column>
					</picker-view>
				</view>
			</view>
			
			 
		</uni-popup>
		
	</view>
</template>

<script>
	export default {
		name: "gt-select-region",
		props: {
			placeholder: {
				type: String,
				default: '请选择'
			},
			inputClass: {
				type: String,
				default: ''
			},
			inputStyle: {
				type: String,
				default: ''
			},
			province: {
				type: [String, Number],
				default: ''
			},
			city: {
				type: [String, Number],
				default: ''
			},
			county: {
				type: [String, Number],
				default: ''
			}
		},
		data() {
			return {
				iconType: "arrowdown",
				title: 'picker-view',
				visible: true,
				value: [10, 0, 0],
				provinceList: [],
				cityList: [],
				countyList: [],
				selectId: [0, 0, 0],
				provinceName: '',
				cityName: '',
				countyName: '',
				regionName: ''

			}
		},
		computed: {},
		created() {
			this.getRegion();
		},
		watch:{
			province(newVal,oldVal){
				this.updateRange(this.province,this.city,this.county,true);
			}
		},
		methods: {
			comfirm(){
				// if(this.value[0]==0){
				// 	this.$fun.showMsg('请选择省');
				// 	return false;
				// }
				// if(this.value[1]==0){
				// 	this.$fun.showMsg('请选择市');
				// 	return false;
				// }
				// if(this.value[2]==0){
				// 	this.$fun.showMsg('请选择区');
				// 	return false;
				// }
				this.updateRegionName();
				this.$emit("update:province", this.provinceList[this.value[0]].id);
				this.$emit("update:city", this.cityList[this.value[1]].id);
				this.$emit("update:county", this.countyList[this.value[2]].id);
				this.$refs.popup.close();
			},
			updateRegionName(){
				let provinceName = this.provinceList[this.value[0]].name || '';
				let cityName = this.cityList[this.value[1]].name || '';
				let countyName = this.countyList[this.value[2]].name || '';
				this.regionName = '';
				if(provinceName && provinceName!='选择省'){
					this.regionName += provinceName;
					if(cityName && cityName!='选择市'){
					this.regionName += ' / ' + cityName;
						if(countyName && cityName!='选择区'){
							this.regionName += ' / ' + countyName;
						}
					}
				}
			},
			cancel(){
				this.$refs.popup.close();
			},
			showPickerView(){
				this.$refs.popup.open();
			},
			bindChange: function(e) {
				const val = e.detail.value
				if (this.value[0] != val[0]) {
					this.value[0] = val[0];
					this.value[1] = 0;
					this.value[2] = 0;
					this.selectId = [this.provinceList[val[0]].id, 0, 0];
				} else if (this.value[1] != val[1]) {
					this.value[1] = val[1];
					this.value[2] = 0;
					this.selectId = [this.provinceList[val[0]].id, this.cityList[val[1]].id, 0];
				} else if (this.value[2] != val[2]) {
					this.value[2] = val[2];
					this.selectId = [this.provinceList[val[0]].id, this.cityList[val[1]].id, this.countyList[val[2]]
						.id];
				}
				this.updateRange(this.selectId[0], this.selectId[1], this.selectId[2]);
				console.log(this.selectId)

			},
			getRegion(updateSelect=false) {
				var _this = this;
				this.$fun.getRegion({
					success: (list) => {
						_this.updateRange(_this.province, _this.city, _this.county,updateSelect)
					}
				})
			},
			updateRange(province, city, county,updateSelect=false) {
				if (!this.$var.region) {
					this.getRegion(updateSelect);
					return false;
				}
				this.provinceList = [{parent_id:0,id:0,name:'选择省'}];
				this.cityList = [{parent_id:0,id:0,name:'选择市'}];
				this.countyList = [{parent_id:0,id:0,name:'选择区'}];
				for (var index in this.$var.region) {
					var item = this.$var.region[index];
					if (item.parent_id == 1) {
						this.provinceList.push(item);
					} else if (item.parent_id == province) {
						this.cityList.push(item);
					} else if (item.parent_id == city) {
						this.countyList.push(item);
					}
				}
				if(updateSelect === true){
					for(let a in this.provinceList){
						let row = this.provinceList[a];
						if(row.id == this.province){
							this.value[0] = a;
							this.selectId[0] = this.province;
							continue;
						}
					}
					for(let b in this.cityList){
						let row = this.cityList[b];
						if(row.id == this.city){
							this.value[1] = b;
							this.selectId[1] = this.city;
							continue;
						}
					}
					for(let c in this.countyList){
						let row = this.countyList[c];
						if(row.id == this.county){
							this.value[2] = c;
							this.selectId[2] = this.county;
							continue;
						}
					}
					this.updateRegionName();
				}
			}
		}
	}
</script>

<style>
	.gt-select-region:hover{
		cursor: pointer;
	}
	.picker-view {
		width: 100%;
		height: 300px;
		margin-top: 20px;
	}

	.item {
		height: 50px;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
</style>
